<div class="alarm-container">
  <aside class="alarm-aside">
    <!-- <app-turbine-tag-selector class="alarm-aside-selector" [hasTag]="false" [isAlarm]="true" [isModel]="true"
      (onFarmSelector)="onFarmSelectedChange($event)" [farmLimiteCount]="20">
    </app-turbine-tag-selector> -->
    <app-device-tag-selector class="alarm-aside-selector" [farmCategory]="farmCategory" [deviceCategories]="deviceCategory" [multipleFarm]="true"
      [choiceDeviceCount]="deviceCountLimit" [defaultChooseDeviceCount]="defaultChooseDeviceCount" [multipleModel]="false"
      [deviceGroupCategory]="deviceGroupCategory" [includeTagSelector]="false" (selectedDevicesChange)="onSelectedDevicesChange($event)">
    </app-device-tag-selector>
  </aside>

  <section class="alarm-main">
    <header>
      <div class="header">
        选择时间：

        <span>
          <select class="year" [ngModel]="currentYear" (ngModelChange)="onChangeYear($event)">
            <option [value]="year" *ngFor="let year of years"> {{year}} </option>
          </select>
          年
        </span>

        <span *ngIf="active==1">
          <select class="quarter" [ngModel]="currentQuarter" (ngModelChange)="onChangeQuarter($event)">
            <option [value]="quarter" *ngFor="let quarter of quarters">{{ quarter }}</option>
          </select>
          季度
        </span>

        <span *ngIf="active==0">
          <select class="month" [ngModel]="currentMonth" (ngModelChange)=" onChangeMonth($event)">
            <option [value]="month" *ngFor="let month of months"> {{month}}</option>
          </select>
          月
        </span>





        <span>
          <button class="button-trend" (click)="onSearch(active)">确定</button>
           <i class="exp">
            <a (click)="exportData(active)" id="ex">导出</a>
          </i> 
  
          <!--<button class="button-trend" (click)="exportData(active)" id="ex">导出</button> -->
        </span>
      </div>
      <div class="trend-main-header">
        <span (click)=onClickHeader(0) [ngClass]="{on:active==0}">
          月度
        </span>

        <span (click)=onClickHeader(1) [ngClass]="{on:active==1}">
          季度
        </span>
        <span (click)=onClickHeader(2) [ngClass]="{on:active==2}">
          年度
        </span>

      </div>
    </header>
    <div class="trend-main-history">
      <!--年度  -->
      <div [ngClass]="{'main-content':true, active:active==2}">
        <section>
          <div class="echarts">
            <!--功率比较曲线  -->
            <div class="line-echarts">
              <app-compare-echarts [maxPower]="maxPower" [series]="yearSeries" [legend]="yearLegend"></app-compare-echarts>
            </div>
          </div>

          <div class="line-point">
            <div class="bottom">
              <div class="bottom-box">
                <p *ngFor="let high of compareDataHighYear">{{high?.deviceName}}机组功率曲线偏高！</p>
                <p *ngFor="let low of compareDataLowYear">{{low?.deviceName}}机组功率曲线偏低！</p>
              </div>
            </div>
          </div>



            <!--实测功率曲线表格导出  -->

          <div class="tab-excel" hidden>
            <!-- 设置border="1"以显示表格框线 -->
            <table id="ex-tab-year" border="1">
              <!-- caption元素可以生成表标题，其单元格列跨度为表格的列数 -->
              <caption border="1">{{currentYear}}年功率曲线比较</caption>
              <thead>                
                <tr>
                  <th>序号</th>
                  <th>风速(m/s)</th>                 
                  <th>设计功率(kW)</th>
                  <th *ngFor="let item of windPowersTabData[0]?.deviceList;">{{item.deviceName}}实测功率(kW)</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let item of windPowersTabData; let i=index">
                  <td>{{ i + 1}}</td>
                  <td>{{item.wind}}</td>
                  <td>{{item.power}}</td>
                  <td  *ngFor="let device of item.deviceList;">{{device.power}}</td>                               
                </tr>
              </tbody>
            </table>
          </div>

       
        </section>
      </div>
      <!-- 季度 -->
      <div class="main-content" [ngClass]="{'main-content':true,active:active==1}">
        <section>
          <div class="echarts">
            <!--功率比较曲线  -->
            <div class="line-echarts">
              <app-compare-echarts [maxPower]="maxPower" [series]="quarterSeries" [legend]="quarterLegend"></app-compare-echarts>
            </div>
          </div>

          <div class="line-point">
            <div class="bottom">
              <div class="bottom-box">
                <p *ngFor="let high of compareDataHighQuarter">{{high?.deviceName}}机组功率曲线偏高！</p>
                <p *ngFor="let low of compareDataLowQuarter">{{low?.deviceName}}机组功率曲线偏低！</p>
              </div>
            </div>
          </div>

          <!--实测功率曲线表格导出  -->

          <div class="tab-excel" hidden>
            <!-- 设置border="1"以显示表格框线 -->
            <table id="ex-tab-quarter" border="1">
              <!-- caption元素可以生成表标题，其单元格列跨度为表格的列数 -->
              <caption border="1">{{currentYear}}年{{currentQuarter}}季度功率曲线比较</caption>
              <thead>
                <tr>
                  <th>序号</th>
                  <th>风速(m/s)</th>                 
                  <th>设计功率(kW)</th>
                  <th *ngFor="let item of windPowersTabData[0]?.deviceList;">{{item.deviceName}}实测功率(kW)</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let item of windPowersTabData; let i=index">
                  <td>{{ i + 1}}</td>
                  <td>{{item.wind}}</td>
                  <td>{{item.power}}</td>
                  <td  *ngFor="let device of item.deviceList;">{{device.power}}</td>                               
                </tr>
              </tbody>
            </table>
          </div>


       

        </section>
      </div>

      <!--月度  -->
      <div class="main-content" [ngClass]="{'main-content':true,active:active==0}">
        <section>
          <div class="echarts">
            <!--功率比较曲线  -->
            <div class="line-echarts">
              <app-compare-echarts [maxPower]="maxPower" [series]="monthSeries" [legend]="monthLegend"></app-compare-echarts>
            </div>
          </div>

          <div class="line-point">
            <div class="bottom">
              <div class="bottom-box">
                <p *ngFor="let high of compareDataHighMonth">{{high?.deviceName}}机组功率曲线偏高！</p>
                <p *ngFor="let low of compareDataLowMonth">{{low?.deviceName}}机组功率曲线偏低！</p>
              </div>
            </div>
          </div>

          <!--实测功率曲线表格导出  -->
          <div class="tab-excel" hidden>
            <!-- 设置border="1"以显示表格框线 -->
            <table id="ex-tab-month" border="1">
              <!-- caption元素可以生成表标题，其单元格列跨度为表格的列数 -->
              <caption border="1">{{currentYear}}年{{currentMonth}}月功率曲线比较</caption>
              <thead>
                <tr>
                  <th>序号</th>
                  <th>风速(m/s)</th>                 
                  <th>设计功率(kW)</th>
                  <th *ngFor="let item of windPowersTabData[0]?.deviceList;">{{item.deviceName}}实测功率(kW)</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let item of windPowersTabData; let i=index">
                  <td>{{ i + 1}}</td>
                  <td>{{item.wind}}</td>
                  <td>{{item.power}}</td>
                  <td  *ngFor="let device of item.deviceList;">{{device.power}}</td>
                 
                  
                </tr>
              </tbody>
            </table>
          </div>


        </section>
      </div>




    </div>
  </section>
</div>